<template>
	<div>
		<breadcrumb :routerList="routerList"></breadcrumb>
		<div class="box">
			<el-row type="flex" :gutter="20" style="font-size: 12px">
				<el-col :span="2" >
					<el-button type="primary" icon="el-icon-search" @click="dialogFormVisible = true" >条件检索</el-button>
                    <el-dialog title="用户列表条件检索" :visible.sync="dialogFormVisible">
                        <el-form>
                            <el-form-item label="用户昵称" :label-width="formLabelWidth">
                                <el-input v-model="nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="注册时间" :label-width="formLabelWidth">
                                <time-pick @timeArr="timeArrFun"></time-pick>
                            </el-form-item>
                            <el-form-item label="最后登录时间" :label-width="formLabelWidth">
                                <time-pick @timeArr="loginTime"></time-pick>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="searchBtn">确 定</el-button>
                        </div>
                    </el-dialog>
				</el-col>
			</el-row>
		</div>
		<el-table
			:data="userList"
			style="width: 100%"
			:row-style="{cursor:'pointer',fontSize:'12px'}"
			row-key="id"
			border
			:height="getWinHeight"
			highlight-current-row
			:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
			<el-table-column label="头像" width="70">
				<template slot-scope=" scope ">
					<img :src="scope.row.headimgurl" alt="" style="width:45px">
				</template>
			</el-table-column>
			<el-table-column label="昵称" prop="nickname" width="100"></el-table-column>
			<el-table-column label="注册时间" >
				<template scope="scope">
					<span>{{$util.timeStampToTime(scope.row.add_time)}}</span>
				</template>
			</el-table-column>
			<el-table-column label="积分" width="60" prop="integral" align="center"></el-table-column>
			<el-table-column label="店铺ID" width="80">
				<template scope="scope">
					<span>{{scope.row.user_shop_id?scope.row.user_shop_id:'--'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="来源微信" >
				<template scope="scope">
					<span>{{scope.row.shop_name?scope.row.shop_name:'--'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="来源店铺" >
				<template scope="scope">
					<span>{{scope.row.user_fid_nick_name?scope.row.user_fid_nick_name:'--'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="最后一次登录时间" prop="login_date">

			</el-table-column>
			<el-table-column
				label="操作"
				align="center">
				<!--<template slot-scope="scope">-->
					<!--<el-button-->
						<!--size="mini"-->
						<!--@click="handleSee(scope.$index, scope.row)">查看</el-button>-->
				<!--</template>-->
			</el-table-column>
		</el-table>
		<paginationAre :total="count" @currentChange="currentChange">></paginationAre>
	</div>
</template>

<script>
	import breadcrumb from '@/components/breadcrumb.vue';
	import paginationAre from '@/components/paginationAre.vue'
	import timePick from '@/components/timePick.vue'
	export default {
		name:'userList',
		components:{breadcrumb,paginationAre,timePick},
		data(){
			return {
				routerList:[
					{
						path:'',
						name: '用户管理'
					}
				],
				userList:[],
				count:0,
				p:1,
				timeVal:'',
				timeArr:[],
				loginTimeArr:[],
                nickname: '',
                dialogFormVisible: false,
                formLabelWidth: '100px'
			}
		},
		created(){
			this.getUserList()
		},
		computed:{
			getWinHeight(){
				let winHeight = document.body.clientHeight;
				return winHeight - 260
			}
		},
		methods:{
			async getUserList(){
				let res = await this.$Http.getUserList({
					p:this.p,
					num:this.$store.state.pageNum,
					start_time:this.timeArr[0],
					end_time:this.timeArr[1],
					login_start_time:this.loginTimeArr[0],
					login_end_time:this.loginTimeArr[1],
                    nickname: this.nickname
				});
				console.log(res)
				this.userList = res.list;
				this.count = Number(res.count);
			},
			currentChange(num){
				this.p = num;
				this.getUserList()
			},
			timeArrFun(time){
				this.timeArr = time;
			},
            loginTime(time){
                this.loginTimeArr = time;
            },
			searchBtn(){
				this.getUserList();
				this.dialogFormVisible = false
                this.nickname = ""
			},
		}
	}
</script>

<style>
	.box{
		width: 100%;
		height: 60px;
		background: white;
		margin: 20px 0;
		padding: 10px 10px;
		box-sizing: border-box
	}
	.success{
		color:#67C23A;
		padding:3px 5px;
		/*border:1px solid #67C23A;*/
		/*border-radius:2px;*/
	}
	.warning{
		color:#F56C6C;
		padding:3px 5px;
		/*border:1px solid #F56C6C;*/
		/*border-radius:2px;*/
	}
	.el-date-editor--daterange.el-input__inner{
		width:100%;
	}
</style>
